<template>
	<view class="home-container">
		<!-- 自定义导航栏 -->
		<view class="custom-navbar" :style="{ opacity: navbarOpacity, backgroundColor: navbarBgColor }">
			<view class="navbar-content">
				<view class="navbar-left">
					<text class="balance-text">算力值: {{ userBalance }}</text>
				</view>
				<text class="navbar-title">AI旅拍</text>
				<view class="navbar-right">
					<button class="recharge-btn" @click="goToRecharge">充值</button>
				</view>
			</view>
		</view>
		
		<!-- 滚动容器 -->
		<scroll-view 
			class="scroll-container" 
			scroll-y="true" 
			@scroll="onScroll"
			:scroll-top="scrollTop"
			enhanced="true"
			show-scrollbar="false"
		>
			<!-- 顶部人物图片 -->
			<view class="hero-section" :style="{ height: heroHeight, transform: heroTransform }">
				<image src="/static/images/lvpai/dingbutu.png" mode="aspectFill" class="hero-image"></image>
				<view class="hero-overlay" :style="{ opacity: heroOpacity }">
					<!-- 标题区域 -->
					<view class="title-section">
						<text class="main-title">绿意夏苏，万物新生</text>
						<text class="sub-title">一春夏特辑</text>
						<!-- 分页指示器 -->
						<view class="pagination">
							<view class="dot active"></view>
							<view class="dot"></view>
							<view class="dot"></view>
						</view>
					</view>

				</view>
			</view>
			
			<!-- 底部背景和内容区域 -->
			<view class="content-wrapper">
				<!-- 弯曲装饰 -->
				<view class="curve-decoration"></view>
				<!-- 背景装饰 -->
				<view class="background-wrapper">
					<image src="/static/images/lvpai/shouyebg.png" mode="aspectFill" class="background-image"></image>
				</view>
				
				<!-- 功能模块区域 -->
				<view class="modules-section">
					<view class="module-row">
						<view class="golden-btn ai-photo-btn" @click="goToAIPhoto">
							<view class="btn-bg-layer"></view>
							<view class="btn-content-wrapper">
								<view class="btn-text-content">
									<text class="btn-title">AI写真</text>
									<text class="btn-subtitle">无限妆造，在线拍大片</text>
								</view>
							</view>
							<view class="btn-shine"></view>
						</view>
						
						<view class="golden-btn travel-btn" @click="goToTravel">
							<view class="btn-bg-layer"></view>
							<view class="btn-content-wrapper">
								<view class="btn-text-content">
									<text class="btn-title">穿越旅行</text>
									<text class="btn-subtitle">无需远行，让你云游世界</text>
								</view>
							</view>
							<view class="btn-shine"></view>
						</view>
					</view>
					
					<view class="module-row">
						<view class="golden-btn style-btn" @click="goToAIStyle">
							<view class="btn-bg-layer"></view>
							<view class="btn-content-wrapper">
								<view class="btn-text-content">
									<text class="btn-title">AI二次元</text>
									<text class="btn-subtitle">百变风格，潮流由你定义</text>
								</view>
							</view>
							<view class="btn-shine"></view>
						</view>
						
						<view class="golden-btn vlog-btn" @click="goToVlog">
							<view class="btn-bg-layer"></view>
							<view class="btn-content-wrapper">
								<view class="btn-text-content">
									<text class="btn-title">AI合照</text>
									<text class="btn-subtitle">分享给朋友一起合照</text>
								</view>
							</view>
							<view class="btn-shine"></view>
						</view>
					</view>
				</view>
				
				<!-- 底部内容区域 -->
				<view class="bottom-section">
					<view class="section-title">
						<text class="title-text">夏日永不停歇</text>
					</view>
					
					<!-- 合并图片展示区域 -->
					<view class="featured-banner">
						<view class="hot-tag-corner">HOT</view>
						<view class="banner-images">
							<image src="/static/images/lvpai/1581754111190_.pic_hd.png" mode="aspectFill" class="banner-image left"></image>
							<image src="/static/images/lvpai/1591754111191_.pic_hd.png" mode="aspectFill" class="banner-image right"></image>
						</view>
						<!-- 悬浮文本层 -->
						<view class="floating-text">
							<text class="banner-title">Beauty Diary</text>
							<view class="enter-btn" @click="goToAIPhoto">
								<text class="enter-text">立即进入</text>
								<text class="enter-arrow">></text>
							</view>
						</view>
					</view>
					
					<!-- 热门模版列表 -->
					<view class="template-list">
						<view class="template-item" v-for="(template, index) in hotTemplates" :key="index" @click="goToTemplate(template)">
							<view class="template-banner">
								<view class="template-hot-tag" v-if="template.isHot">HOT</view>
								<view class="template-new-tag" v-if="template.isNew">NEW</view>
								<view class="template-images">
									<image :src="template.leftImage" mode="aspectFill" class="template-image left"></image>
									<image :src="template.rightImage" mode="aspectFill" class="template-image right"></image>
								</view>
								<!-- 悬浮文本层 -->
								<view class="template-floating-text">
									<text class="template-title">{{ template.title }}</text>
									<view class="template-enter-btn" @click="goToAIPhoto">
										<text class="template-enter-text">立即进入</text>
										<text class="template-arrow">></text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<!-- 椭圆形导航栏 -->
		<EllipseTabBar />
	</view>
</template>

<script>
import EllipseTabBar from '@/components/EllipseTabBar.vue'

export default {
	components: {
		EllipseTabBar
	},
	data() {
		return {
			scrollTop: 0,
			heroHeight: '75vh',
			heroOpacity: 1,
			heroTransform: 'scale(1)',
			navbarOpacity: 0,
			navbarBgColor: 'rgba(255,255,255,0)',
			statusBarHeight: 0,
			userBalance: 0,
			hotTemplates: [
				{
					id: 1,
					title: 'Beauty Diary',
					leftImage: '/static/images/lvpai/1581754111190_.pic_hd.png',
					rightImage: '/static/images/lvpai/1591754111191_.pic_hd.png',
					isHot: false,
					isNew: true
				},
				{
					id: 2,
					title: 'Fashion Trends',
					leftImage: '/static/images/lvpai/1591754111191_.pic_hd.png',
					rightImage: '/static/images/lvpai/1601754111192_.pic_hd.png',
					isHot: false,
					isNew: true
				},
				{
					id: 3,
					title: 'Vintage Style',
					leftImage: '/static/images/lvpai/1601754111192_.pic_hd.png',
					rightImage: '/static/images/lvpai/1581754111190_.pic_hd.png',
					isHot: true,
					isNew: false
				}
			]
		}
	},
	onLoad() {
		// 获取状态栏高度
		const systemInfo = uni.getSystemInfoSync();
		this.statusBarHeight = systemInfo.statusBarHeight;
		
		// 设置状态栏样式
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: '#000000'
		});
		
		// 监听余额更新事件
		uni.$on('balanceUpdated', (newBalance) => {
			this.userBalance = newBalance;
		});
		
		// 获取用户余额
		this.getUserBalance();
	},
	
	onUnload() {
		// 移除事件监听
		uni.$off('balanceUpdated');
	},
	methods: {
		onScroll(e) {
			const scrollTop = e.detail.scrollTop;
			const threshold = 300; // 触发阈值
			
			// 计算滚动比例
			const scrollRatio = Math.min(scrollTop / threshold, 1);
			
			// 英雄区域高度变化 (75vh -> 0vh)
			const minHeight = 0;
			const maxHeight = 75;
			const currentHeight = maxHeight - (maxHeight - minHeight) * scrollRatio;
			this.heroHeight = `${currentHeight}vh`;
			
			// 英雄区域透明度变化
			this.heroOpacity = 1 - scrollRatio;
			
			// 英雄区域缩放变化
			const scale = 1 - scrollRatio * 0.2;
			this.heroTransform = `scale(${scale})`;
			
			// 导航栏透明度和背景色变化
			this.navbarOpacity = scrollRatio;
			this.navbarBgColor = `rgba(255,255,255,${scrollRatio * 0.95})`;
		},

		
		goToAIPhoto() {
			uni.navigateTo({
				url: '/pages/aiphoto/ai_change/index'
			});
		},
		goToTravel() {
			uni.navigateTo({
				url: '/pages/ai_video/index'
			});
		},
		goToAIStyle() {
			uni.navigateTo({
				url: '/pages/erciyuan_photo/index'
			});
		},
		goToVlog() {
			// 跳转到AI合照页面
			uni.navigateTo({
				url: '/pages/group_photo/index'
			});
		},
		
		goToTemplate(template) {
			uni.showToast({
				title: `进入${template.title}模版`,
				icon: 'none'
			});
		},
		
		goToRecharge() {
			uni.navigateTo({
				url: '/pages/recharge/index'
			});
		},
		
		getUserBalance() {
			// 模拟获取用户余额
			// 实际开发中这里应该调用API获取真实余额
			this.userBalance = uni.getStorageSync('userBalance') || 0;
		}
	}
}
</script>

<style scoped>
.home-container {
	width: 100%;
	height: 100vh;
	position: relative;
	background: linear-gradient(180deg, rgba(240,248,255,0.8) 0%, rgba(230,230,250,0.9) 100%);
}

.custom-navbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	height: calc(44px + var(--status-bar-height));
	backdrop-filter: blur(20rpx);
	-webkit-backdrop-filter: blur(20rpx);
	border-bottom: 1rpx solid rgba(0,0,0,0.1);
	transition: all 0.3s ease;
}

.navbar-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 44px;
	margin-top: var(--status-bar-height);
	padding: 0 20rpx;
}

.navbar-left {
	flex: 1;
	display: flex;
	align-items: center;
}

.navbar-title {
	font-size: 34rpx;
	font-weight: 600;
	color: #333;
	text-align: center;
}

.navbar-right {
	flex: 1;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.balance-text {
	font-size: 24rpx;
	color: #4ade80;
	font-weight: 500;
}

.recharge-btn {
	background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
	color: white;
	font-size: 24rpx;
	font-weight: 500;
	border-radius: 25rpx;
	padding: 12rpx 24rpx;
	border: none;
	box-shadow: 0 4rpx 12rpx rgba(74, 222, 128, 0.3);
}

.recharge-btn:active {
	transform: scale(0.95);
}

.scroll-container {
	width: 100%;
	height: 100vh;
}

.hero-section {
	position: relative;
	overflow: hidden;
	transition: all 0.3s ease;
}

.hero-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.3) 100%);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 60rpx 40rpx;
	transition: opacity 0.3s ease;
}



.content-wrapper {
	position: relative;
	background: linear-gradient(180deg, rgba(240,248,255,0.9) 0%, rgba(230,230,250,0.95) 100%);
	padding: 60rpx 40rpx 40rpx;
	min-height: 100vh;
	margin-top: -40rpx;
	border-radius: 40rpx 40rpx 0 0;
	z-index: 3;
}

.curve-decoration {
	position: absolute;
	top: -40rpx;
	left: 0;
	right: 0;
	height: 80rpx;
	background: linear-gradient(180deg, rgba(240,248,255,0.9) 0%, rgba(230,230,250,0.95) 100%);
	border-radius: 40rpx 40rpx 0 0;
	z-index: 2;
}

.background-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.3;
	z-index: 1;
}

.background-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.title-section {
	text-align: center;
	margin-bottom: 20rpx;
}

.main-title {
	display: block;
	font-size: 52rpx;
	font-weight: 600;
	color: #fff;
	margin-bottom: 20rpx;
	text-shadow: 0 4rpx 12rpx rgba(0,0,0,0.3);
	letter-spacing: 2rpx;
}

.sub-title {
	display: block;
	font-size: 28rpx;
	color: #fff;
	background: rgba(255,255,255,0.15);
	backdrop-filter: blur(10rpx);
	padding: 12rpx 32rpx;
	border-radius: 25rpx;
	margin: 20rpx auto;
	width: fit-content;
	border: 1rpx solid rgba(255,255,255,0.2);
}

.pagination {
	display: flex;
	justify-content: center;
	gap: 16rpx;
	margin-top: 30rpx;
}

.dot {
	width: 16rpx;
	height: 16rpx;
	border-radius: 50%;
	background: rgba(255,255,255,0.4);
	transition: all 0.3s ease;
}

.dot.active {
	background: rgba(255,255,255,0.9);
	transform: scale(1.2);
}



.modules-section {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
}

.module-row {
	display: flex;
	gap: 24rpx;
	margin-bottom: 24rpx;
}

/* 黄金比例按钮设计 (1:1.618) */
.golden-btn {
	flex: 1;
	position: relative;
	width: 100%;
	height: 130rpx;
	border-radius: 20rpx;
	overflow: hidden;
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	box-shadow: 
		0 8rpx 32rpx rgba(0,0,0,0.12),
		0 2rpx 12rpx rgba(0,0,0,0.08),
		inset 0 1rpx 0 rgba(255,255,255,0.1);
	transform: translateZ(0);
	backdrop-filter: blur(20rpx);
	-webkit-backdrop-filter: blur(20rpx);
}

.golden-btn:active {
	transform: translateY(2rpx) scale(0.98);
	box-shadow: 
		0 8rpx 32rpx rgba(0,0,0,0.2),
		0 2rpx 12rpx rgba(0,0,0,0.15);
}

/* 背景渐变层 */
.btn-bg-layer {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
}

/* AI写真 - 粉色系渐变 */
.ai-photo-btn .btn-bg-layer {
	background: linear-gradient(135deg, 
		#ff6b9d 0%, 
		#ff8fb3 30%, 
		#ffb3d1 70%, 
		#ffc0cb 100%);
}

/* 穿越旅行 - 橙色系渐变 */
.travel-btn .btn-bg-layer {
	background: linear-gradient(135deg, 
		#ff8a4c 0%, 
		#ffb366 30%, 
		#ffd699 70%, 
		#ffe4b5 100%);
}

/* AI造型 - 紫色系渐变 */
.style-btn .btn-bg-layer {
	background: linear-gradient(135deg, 
		#a78bfa 0%, 
		#c084fc 30%, 
		#d8b4fe 70%, 
		#e9d5ff 100%);
}

/* 智能VLOG - 蓝色系渐变 */
.vlog-btn .btn-bg-layer {
	background: linear-gradient(135deg, 
		#60a5fa 0%, 
		#7dd3fc 30%, 
		#a5f3fc 70%, 
		#bfdbfe 100%);
}

/* 图标容器 */
.btn-icon-wrapper {
	position: relative;
	z-index: 3;
	width: 50rpx;
	height: 50rpx;
	background: rgba(255,255,255,0.2);
	backdrop-filter: blur(10rpx);
	border-radius: 12rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1rpx solid rgba(255,255,255,0.3);
	box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.15);
	flex-shrink: 0;
}

/* 图标设计 */
.btn-icon {
	position: relative;
}

/* 相机图标 */
.camera-icon {
	width: 28rpx;
	height: 24rpx;
	background: rgba(255,255,255,0.9);
	border-radius: 4rpx;
	position: relative;
}

.camera-icon::before {
	content: '';
	position: absolute;
	top: -6rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 14rpx;
	height: 6rpx;
	background: rgba(255,255,255,0.9);
	border-radius: 3rpx 3rpx 0 0;
}

.camera-icon::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 12rpx;
	height: 12rpx;
	border: 2rpx solid rgba(255,255,255,0.9);
	border-radius: 50%;
	background: transparent;
}

/* 旅行图标 */
.travel-icon {
	width: 28rpx;
	height: 28rpx;
	background: rgba(255,255,255,0.9);
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	position: relative;
}

.travel-icon::before {
	content: '';
	position: absolute;
	bottom: -8rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 20rpx;
	height: 3rpx;
	background: rgba(255,255,255,0.9);
	border-radius: 2rpx;
}

/* 造型图标 */
.style-icon {
	width: 24rpx;
	height: 24rpx;
	position: relative;
}

.style-icon::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 3rpx;
	height: 24rpx;
	background: rgba(255,255,255,0.9);
	border-radius: 2rpx;
}

.style-icon::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 24rpx;
	height: 3rpx;
	background: rgba(255,255,255,0.9);
	border-radius: 2rpx;
}

/* VLOG图标 */
.vlog-icon {
	width: 28rpx;
	height: 20rpx;
	background: rgba(255,255,255,0.9);
	border-radius: 4rpx;
	position: relative;
}

.vlog-icon::before {
	content: '';
	position: absolute;
	top: 50%;
	right: -8rpx;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6rpx 0 6rpx 8rpx;
	border-color: transparent transparent transparent rgba(255,255,255,0.9);
}

/* 按钮内容包装器 */
.btn-content-wrapper {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6rpx 24rpx 26rpx 24rpx;
	height: 100%;
}

/* 文本内容区域 */
.btn-text-content {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.btn-title {
	font-size: 40rpx;
	font-weight: 700;
	color: #fff;
	margin-bottom: 4rpx;
	text-shadow: 0 2rpx 8rpx rgba(0,0,0,0.3);
	letter-spacing: 1rpx;
	line-height: 1.1;
}

.btn-subtitle {
	font-size: 22rpx;
	color: rgba(255,255,255,0.9);
	font-weight: 400;
	line-height: 1.4;
	text-shadow: 0 1rpx 4rpx rgba(0,0,0,0.2);
}

/* 光泽效果 */
.btn-shine {
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, 
		transparent 0%, 
		rgba(255,255,255,0.2) 50%, 
		transparent 100%);
	z-index: 4;
	transition: left 0.6s ease;
}

.golden-btn:active .btn-shine {
	left: 100%;
}

.bottom-section {
	margin-top: 60rpx;
	padding: 40rpx 0;
}

.section-title {
	margin-bottom: 30rpx;
}

.title-text {
	font-size: 40rpx;
	font-weight: 700;
	color: #333;
	line-height: 1.2;
}

.hot-content {
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.hot-tag {
	background: linear-gradient(135deg, #ff4444 0%, #ff6666 100%);
	color: white;
	font-size: 20rpx;
	font-weight: 700;
	padding: 8rpx 16rpx;
	border-radius: 8rpx;
	letter-spacing: 1rpx;
}

.hot-desc {
	font-size: 28rpx;
	color: #666;
}

/* 合并图片展示区域 */
.featured-banner {
	position: relative;
	margin: 30rpx 0;
	border-radius: 20rpx;
	overflow: hidden;
	box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.15);
}

.hot-tag-corner {
	position: absolute;
	top: 20rpx;
	left: 20rpx;
	background: linear-gradient(135deg, #ff4444 0%, #ff6666 100%);
	color: white;
	font-size: 20rpx;
	font-weight: 700;
	padding: 8rpx 16rpx;
	border-radius: 12rpx;
	z-index: 10;
	box-shadow: 0 4rpx 12rpx rgba(255, 68, 68, 0.3);
	letter-spacing: 1rpx;
}

.banner-images {
	display: flex;
	height: 200rpx;
	position: relative;
}

.banner-image {
	width: 50%;
	height: 100%;
	object-fit: cover;
}

.banner-image.left {
	border-radius: 20rpx 0 0 20rpx;
}

.banner-image.right {
	border-radius: 0 20rpx 20rpx 0;
}

/* 悬浮文本层 */
.floating-text {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: linear-gradient(135deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 100%);
	z-index: 5;
}

.banner-title {
	font-size: 48rpx;
	font-weight: 700;
	color: white;
	font-family: 'Georgia', serif;
	font-style: italic;
	margin-bottom: 20rpx;
	text-shadow: 0 4rpx 12rpx rgba(0,0,0,0.5);
	letter-spacing: 2rpx;
}

.enter-btn {
	display: flex;
	align-items: center;
	background: linear-gradient(135deg, #ff6b9d 0%, #ff8a9b 100%);
	color: white;
	padding: 12rpx 24rpx;
	border-radius: 25rpx;
	font-size: 24rpx;
	font-weight: 500;
	box-shadow: 0 4rpx 16rpx rgba(255, 107, 157, 0.3);
	transition: all 0.3s ease;
}

.enter-btn:active {
	transform: scale(0.95);
}

.enter-text {
	margin-right: 8rpx;
}

.enter-arrow {
	font-size: 20rpx;
	font-weight: 600;
}

/* 热门模版列表 */
.template-list {
	margin-top: 40rpx;
}

.template-item {
	margin-bottom: 30rpx;
}

.template-banner {
	position: relative;
	height: 200rpx;
	border-radius: 20rpx;
	overflow: hidden;
	box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.15);
	transition: all 0.3s ease;
}

.template-banner:active {
	transform: translateY(2rpx) scale(0.98);
	box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.2);
}

.template-hot-tag {
	position: absolute;
	top: 15rpx;
	left: 15rpx;
	background: linear-gradient(135deg, #ff4444 0%, #ff6666 100%);
	color: white;
	font-size: 18rpx;
	font-weight: 700;
	padding: 6rpx 12rpx;
	border-radius: 8rpx;
	z-index: 10;
	letter-spacing: 1rpx;
	box-shadow: 0 4rpx 12rpx rgba(255, 68, 68, 0.3);
}

.template-new-tag {
	position: absolute;
	top: 15rpx;
	left: 15rpx;
	background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
	color: white;
	font-size: 18rpx;
	font-weight: 700;
	padding: 6rpx 12rpx;
	border-radius: 8rpx;
	z-index: 10;
	letter-spacing: 1rpx;
	box-shadow: 0 4rpx 12rpx rgba(74, 222, 128, 0.3);
}

.template-images {
	display: flex;
	height: 100%;
	position: relative;
}

.template-image {
	width: 50%;
	height: 100%;
	object-fit: cover;
}

.template-image.left {
	border-radius: 20rpx 0 0 20rpx;
}

.template-image.right {
	border-radius: 0 20rpx 20rpx 0;
}

/* 模版悬浮文本层 */
.template-floating-text {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: linear-gradient(135deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 100%);
	z-index: 5;
}

.template-title {
	font-size: 42rpx;
	font-weight: 700;
	color: white;
	font-family: 'Georgia', serif;
	font-style: italic;
	margin-bottom: 20rpx;
	text-shadow: 0 4rpx 12rpx rgba(0,0,0,0.5);
	letter-spacing: 2rpx;
}

.template-enter-btn {
	display: flex;
	align-items: center;
	background: rgba(255,255,255,0.2);
	backdrop-filter: blur(20rpx);
	-webkit-backdrop-filter: blur(20rpx);
	color: white;
	padding: 12rpx 24rpx;
	border-radius: 25rpx;
	font-size: 24rpx;
	font-weight: 500;
	border: 1rpx solid rgba(255,255,255,0.3);
	box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.1);
	transition: all 0.3s ease;
}

.template-enter-btn:active {
	transform: scale(0.95);
	background: rgba(255,255,255,0.3);
}

.template-enter-text {
	margin-right: 8rpx;
}

.template-arrow {
	font-size: 20rpx;
	font-weight: 600;
}

/* 移动端优化 */
</style>